<template>
  <div class="index-list page">
    <!-- 轮播图 -->
    <div class="banners">
      <img src="http://static.huruqing.cn/fresh/banner1.jpeg" />
    </div>
  
    <!-- 推荐图标 -->
    <Type :typeList="typeList"></Type> 
  
    <!-- 秒杀和拼团 -->
    <MiaoShao></MiaoShao>
  
    <!-- 领取优惠券 -->
    <Cooper></Cooper>
  
    <!-- 排序 -->
    <Sort></Sort>
  
    <!-- 商品列表 -->
    <Goods :goodsList="goodsList"></Goods>
  
    <Footer></Footer>
  </div>
</template>

<script>  
import request from '../../../utils/request'
// 轮播图
import Banner from "./list/Banner";
// 分类
import Type from './list/Type.vue';
import MiaoShao from "./list/MiaoShao.vue";
import Sort from "./list/Sort.vue";
import Goods from "./list/Goods.vue";
import Cooper from "./list/Cooper.vue";
import Footer from "../../components/Footer.vue";

export default {
  name: "productList",

  components: {
    Footer,                
    Banner,
    Type,
    MiaoShao,
    Sort,
    Goods,
    Cooper,
  },
  data() {
    return {
      typeList: [],
      goodsList: []
    };
  },

  created() {
    this.getTypeList();
    this.getGoodsList();
  },

  methods: {
    async getTypeList() {
      let res = await request.get('/category/all');
      this.typeList = res.list;
    },
    async getGoodsList() {
      let res = await request.get('/product/list');
      this.goodsList = res.list;
    }
  }
};
</script>

<style lang="less">
@import "./list.less";

.reccomd {
  .item {
    width: 22%;
  }

  flex-wrap: wrap;
}
</style>